<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动动画</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: pink;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0;
      overflow-x: hidden;
    }

    .title h1 {
      margin: 10px;
    }

    .box {
      background-color: skyblue;
      color: #fff;
      font-weight: bold;
      font-size: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 300px;
      margin: 10px;
      border-radius: 10px;
      transform: translateX(400%);
      transition: transform 0.6s ease;
    }

    .box:nth-child(even) {
      transform: translateX(-400%);
    }

    .box.show {
      transform: translateX(0);
      transition: transform 0.5s ease;
    }

    .box h2 {
      font-size: 45px;
    }
  </style>
</head>

<body>
  <div class="title">
    <h1>滚动滚轮查看动画效果</h1>
  </div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>
  <div class="box">Count</div>

  <script>
    let boxs = document.querySelectorAll(".box");
    checkBoxs();
    document.onscroll = checkBoxs;
    function checkBoxs() {
      let taggleHeight = (window.innerHeight * 2) / 3;
      boxs.forEach(ele => {
        // 每次滚动时获取每个box距离视口的高度
        let top = ele.getBoundingClientRect().top;
        // 当滚轮向下滚动时，box距离视窗的高度小于视口高度时，依次从左右交替滑出一个box
        if (top <= taggleHeight) {
          ele.classList.add("show");
        } else {
          ele.classList.remove("show");
        }
      });
    }
  </script>
</body>

</html>